<template>
    <div class="comment">
        <h4>发表评论</h4>
        <textarea placeholder="请填写评论内容（不超过120个字）" maxlength="120" v-model="msg"></textarea>
        <mt-button type="primary" size="large" class="btn" @click="postComment">发表评论</mt-button>

        <div class="cmt_list">
            <div class="cmt_item" v-for="(item, i) in comments" :key="item.add_time">
                <div class="cmt_title">
                    第{{i+1}}楼&nbsp;&nbsp;用户：{{item.user_name}}&nbsp;&nbsp;发表时间：{{item.add_time|dateFormat}}
                </div>
                <div class="cmt_body">
                    {{item.content?item.content:'此用户很懒，什么也没说'}}
                </div>
            </div>
        </div>

        <mt-button type="danger" plain  size="large"  class="btn" @click="getMore">加载更多</mt-button>
    </div>
</template>

<script>
import { Toast } from 'mint-ui'
export default {
    data() {
        return {
            pageindex: 1,
            comments: [],
            msg: ''
        }
    },
    props: ['id'],
    created() {
        this.getComments()
    },
    methods:{
        getComments() {//获取评论内容
            this.$http.get('api/getcomments/' + this.id + '?pageindex=' + this.pageindex).then(res => {
                if(res.body.status === 0) {
                    this.comments = this.comments.concat(res.body.message) 
                }else{
                    Toast('获取评论数据失败')
                }
            }, res => {
                Toast('发送请求失败，此为假数据')
                this.comments = this.comments.concat(
                    [
                        {
                            user_name: '天马座',
                            add_time: '2015-11-16T03:50:28.000Z',
                            content: '第三方角度上看'
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2018-04-16T03:50:25.000Z',
                            content: ''
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2017-04-16T03:50:23.000Z',
                            content: ''
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2016-04-16T03:50:21.000Z',
                            content: '第三方角度上看'
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2015-09-16T03:50:18.000Z',
                            content: '第三方角度上看'
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2015-08-16T03:50:20.000Z',
                            content: '第三方角度上看'
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2015-07-16T03:50:08.000Z',
                            content: ''
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2015-06-16T03:50:09.000Z',
                            content: '第三方角度上看'
                        },
                        {
                            user_name: '独角兽',
                            add_time: '2015-05-16T03:50:00.000Z',
                            content: '第三方角度上看'
                        }
                    ]
                )
            })
        },
        getMore() {//加载更多
            this.pageindex ++;
            this.getComments()
        },
        postComment() {//发送评论
            if(this.msg.trim() === 0) {
                return Toast('评论内容不能为空')
            }
            this.$http.post('api/postcomment/' + this.id, {
                 content: this.msg.trim() 
            }).then(res => {
                if(res.body.status === 0) {
                    var cmt = {
                        user_name: '匿名用户',
                        add_time: Date.now(),
                        content: this.msg.trim()
                    }
                    this.comments.unshift(cmt)
                    this.msg = ''
                }
            }, res => {
                var cmt = {
                    user_name: '匿名用户',
                    add_time: Date.now(),
                    content: this.msg.trim()
                }
                this.comments.unshift(cmt)
                this.msg = ''
            })
        }
    }
}
</script>

<style lang="scss" scoped>
    .comment{
        font-size: 14px;
        textarea{
            margin: 10px 0;
            padding: 0;
            font-size: 12px;
            height: 100px;
        }
        .btn{
            margin-bottom: 10px;
            font-size: 16px;
        }
        .cmt_list{
            .cmt_title{
                line-height: 30px;
                font-size: 13px;
                background-color: #ccc;
            }
            .cmt_body{
                text-indent: 2em;
                font-size: 12px;
                line-height: 40px;
            }
        }
    }
</style>
